/*自定义的菜单页样式*/


/*规定 “类” 为 “background_img” 的样式，此处用来实现自动调整大小的背景图片*/
.background {
    /*让整个div固定在屏幕的最上方和最左边*/
    position:fixed;
    top: 0;
    left: 0;

    /*让div铺满整个屏幕*/
    width:100%;
    height:100%;

    /*div的最小宽度为1000px，当屏幕宽度小于1000px时，图片不会缩放*/
    min-width: 1000px;

    /*让整个div在HTML页面中各个层级的下方，正常情况下，默认创建的层级z-index的值是0*/
    z-index:-10;

    /*zoom是CSS hack中专对IE6起作用的部分。
      IE6浏览器会执行zoom:1表示对象的缩放比例。
      兼容IE6、IE7、IE8浏览器，经常会遇到一些问题，可以使用zoom:1来解决。
      zoom有如下作用：
        1.触发IE浏览器的haslayout；
        2.解决ie下的浮动，margin重叠等一些问题。*/
    zoom: 1;

    /*设置背景图片：平铺，不重复。并设置背景色，当加载缓慢或者加载不出图片时可以有个代替的底色*/
    /*一定要注意 url 的斜杠是“÷”的斜杠：“/” 否则找不到路径！！！*/
    background: url(../images/background-3-1920X1280-small.png) no-repeat;
    background-color: rgba(208,229,247,1);

    /*上面三句是一个意思：让图片随屏幕大小同步缩放，
      但是有部分可能会被裁切，不过不至于会露白，
      下面两句是为chrome和opera浏览器作兼容*/
    background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;

    /*图片的位置，居中，靠左对齐*/
    background-position: center 0;

    /*高斯模糊滤镜（会模糊整个div内的所有内容），模糊半径：15px*/
    filter: blur(15px);
}


/*页边二级导航栏*/
#sidebar{
    /*容器位置、大小、颜色*/
    position: fixed;        /*位置固定在左上角，以便于阅读右边内容时随时可以导航*/
    float: left;        /*浮动在左边*/
    top: 0;
    left: 0;
    width: 20%;
    padding-top: 10%;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
    text-align: left;
}


/*【Microsoft Fluent Design】浅色 - 不透明度：40% - 导航栏，*/
.MFD_Light_Navigation{
    /*容器位置、大小、颜色*/
    top: 0;
    left: 0;
    width: 100%;        /*宽度为整个页面，实质上成为了最大的容器*/
    height: auto;        /*长度会根据内容自动调整*/
    background-color: rgba(240,248,255,0.5);

    /*内边距、边框、外边距（上右下左）*/
    padding-top: 3rem;
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;

    border-style: solid;        /*注意：只有设置了“border-style”，其他的“border-XXX”属性才能起作用！！！*/
    border-width: 2px 2px 2px 2px;
    border-color: rgba(230,230,230,0.6);

    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 0;

    /*字体大小、对齐方式、颜色*/
    font-size: 16px;
    text-align: left;
    color:rgb(0,0,0);
}


/*【Microsoft Fluent Design】浅色 - 不透明度：80% - 内容*/
.MFD_Light_Content{
    /*容器位置、大小、颜色*/
    top: 0;
    left: 0;
    width: 80%;
    height: auto;        /*长度会根据内容自动调整*/
    background-color: rgba(240,248,255,0.6);
    /*（尚不清楚计算方法有无问题）
    由于是内容页叠加在导航页，导航页透光率为0.5，透过导航页的光为50%。
    内容页的透光率为0.4，透过内容页的光为50%×40%=20%，即不透明度为0.2*/

    /*内边距、边框、外边距（上右下左）*/
    padding-top: 5%;
    padding-left: 10%;
    padding-right: 10%;
    padding-bottom: 10%;

    border-style: solid;        /*注意：只有设置了“border-style”，其他的“border-XXX”属性才能起作用！！！*/
    border-width: 0px 0px 0px 0px;
    border-color: rgba(200,200,200,0.9);

    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    margin-left: 20%;        /*给左边的导航栏留出位置*/

    /*字体大小、对齐方式、颜色*/
    font-size: 16px;
    text-align: left;
    color:rgb(0,0,0);
}


/*内容页各部分*/
.part{
    /*容器位置、大小、颜色*/

    /*内边距、边框、外边距（上右下左）*/
    padding-top: 5%;
    padding-bottom: 5%;
    
    border-style: unset;        /*当前边框已禁用。在需要的时候设置边框以便检查区域大小*/
    border-width: 2px 2px 2px 2px;
    border-color: rgba(200,200,200,1);

    /*字体大小、对齐方式、颜色*/
    font-size: 16px;
    line-height: 200%;
    text-align: left;
    color:rgb(0,0,0);
}


/*规定所有段落的样式*/
p { 
  text-indent: 2em;
  background: transparent;        /*此项设置相当于文字底纹（当前是透明）*/
  line-height: 200%;
}


/*规定链接的字体颜色为黑色*/
a{
  color:rgb(0,0,0);
}




/*【幻灯片效果】*/
* {box-sizing:border-box}
body {font-family: Verdana,sans-serif;}
.mySlides {display:none}
 
/* 幻灯片容器 */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}
 
/* 下一张 & 上一张 按钮 */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}
 
/* 定位 "下一张" 按钮靠右 */
.next {
  right: 0;
  border-radius: 3px;
}

/* 定位 "上一张" 按钮靠左边 */
.prev {
  left: 0;
  border-radius: 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.6);
}
 
/* 标题文本 */
.text {
  color: rgba(0,0,0,0.8);
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}
 
/* 数字文本 (1/3 等) */
.numbertext {
  color: #000000;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  bottom: 0;
  text-align: center;
}
 
/* 标记符号 */
.dot {
  cursor:pointer;
  height: 13px;
  width: 13px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}
 
.active, .dot:hover {
  background-color: #717171;
}
 
/* 淡出动画 */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 1.5s;
  animation-name: fade;
  animation-duration: 1.5s;
}
 
@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}
 
@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}